import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class NavBar extends StatefulWidget {
  const NavBar({Key? key}) : super(key: key);

  @override
  State<NavBar> createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  List listOfNavBarItems = ['New Zumba', 'Home', 'About', 'Contact'];
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 20.0, right: 35.0),
      child: Row(
        children: listOfNavBarItems
            .map((e) => NavBarItems(
                  text: e,
                ))
            .toList(),
      ),
    );
  }
}

class NavBarItems extends StatefulWidget {
  const NavBarItems({Key? key, this.text}) : super(key: key);
  final String? text;

  @override
  State<NavBarItems> createState() => _NavBarItemsState();
}

class _NavBarItemsState extends State<NavBarItems> {
  Color? color = Colors.white;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
        onEnter: (val) {
          setState(() {
            color = Colors.black;
          });
        },
        onExit: (val) {
          setState(() {
            color = Colors.white;
          });
        },
        child: Container(
          padding: EdgeInsets.all(12.0),
          child: Text(
            widget.text!,
            style: GoogleFonts.poppins(
                fontSize: 16.0, color: color, fontWeight: FontWeight.w600),
          ),
        ));
  }
}
